<template>
  <el-dialog v-model="dialogVisible" title="编辑" destroy-on-close @opened="handleDlgOpen">
    <div class="qyui-cell row" style="height:400px">
      <div class="qyui-cell" style="height:30px">
        <el-button type="primary" @click="handleAddParam">
          添加
        </el-button>
        <el-button type="danger" @click="handleDeleteParam">
          删除
        </el-button>
      </div>
      <div class="qyui-card">
        <div class="qyui-card-title">
          数据源参数
        </div>
        <div class="qyui-card-body">
          <div class="qyui-cell row">
            <div class="qyui-cell col">
              <div class="qyui-cell bdr" style="width: 360px">
                <ul class="qyui-ul">
                  <li
                    v-for="(item,index) in manager.Parameters" :key="item.ParamName"
                    :class="{current:currentIndex===index}"
                    @click="handleParamClick(index)"
                  >
                    {{ item.ParamName }}
                  </li>
                </ul>
              </div>
              <div class="qyui-cell row">
                <el-form
                  v-show="currentIndex!==''"
                  ref="updateParamFormRef" :rules="updateParamFormRules" :model="updateParamForm"
                  label-width="100px"
                >
                  <el-form-item label="ID">
                    <el-input v-model="updateParamForm.ID" disabled></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-radio-group v-model="updateParamForm.ParameterType" @change="handleTypeChange">
                      <el-radio-button :label="1">
                        系统参数
                      </el-radio-button>
                      <el-radio-button :label="3">
                        用户输入
                      </el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item v-if="updateParamForm.ParameterType===1">
                    <el-radio-group v-model="updateParamForm.ParamName" @change="handleParamNameChange">
                      <el-radio-button label="CurrentUserName">
                        当前用户名称
                      </el-radio-button>
                      <el-radio-button label="CurrentUserCode">
                        当前用户编码
                      </el-radio-button>
                      <el-radio-button label="CurrentUserRole">
                        当前角色编码
                      </el-radio-button>
                      <el-radio-button label="CurrentUserRoleName">
                        当前角色名称
                      </el-radio-button>
                      <el-radio-button label="CurrentWindowRecordID">
                        当前记录ID
                      </el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <template v-else>
                    <el-form-item label="数据类型:">
                      <el-radio-group v-model="updateParamForm.ValueType">
                        <el-radio-button label="NumberExpression">
                          数字
                        </el-radio-button>
                        <el-radio-button label="StringExpression">
                          字符
                        </el-radio-button>
                        <el-radio-button label="DateExpression">
                          日期
                        </el-radio-button>
                        <el-radio-button label="TimeExpression">
                          时间
                        </el-radio-button>
                        <el-radio-button label="BoolExpression">
                          Bool
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="参数名:">
                      <el-input
                        v-model="updateParamForm.ParamName" type="text" @input="handleInput"
                      ></el-input>
                    </el-form-item>
                  </template>
                  <el-form-item>
                    <el-button type="primary" @click="handleSave">
                      保存
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialogMixin.js';

export default {

  mixins: [dialogMixin],
  inject: ['manager'],
  data: function () {
    return {
      updateParamForm: {
        ID: '',
        ParamName: '',
        ParameterType: '',
        ValueType: '',
      },
      currentIndex: '',
      updateParamFormRules: {},

    };
  },
  mounted: function () {

  },
  methods: {
    handleDlgOpen() {
      if (this.manager.Parameters.length > 0) {
        this.handleParamClick(0);
      }
    },
    handleAddParam() {
      this.updateParamForm.ID = -1;
      this.updateParamForm.ParamName = 'P1';
      this.updateParamForm.ParameterType = 3;
      this.updateParamForm.ValueType = 'StringExpression';
      this.currentIndex = -1;
    },
    async handleDeleteParam() {
      const res = await this.$http({
        url: 'api/ZSReport/deleteDataSource_Param',
        data: {
          id: this.updateParamForm.ID,
        },
      });
      if (res) {
        this.manager.Parameters.splice(this.currentIndex, 1);

        if (this.manager.Parameters.length > 0) {
          if (this.currentIndex > 0) {
            this.currentIndex = this.currentIndex - 1;
          }
        } else {
          this.currentIndex = -1;
        }
        this.handleParamClick(this.currentIndex);
        this.$message({
          type: 'success',
          message: '删除成功',
        });
      }
    },
    handleParamNameChange() {
      if (this.updateParamForm.ParamName === 'CurrentWindowRecordID') {
        this.updateParamForm.ValueType = 'NumberExpression';
      } else {
        this.updateParamForm.ValueType = 'StringExpression';
      }
    },
    handleTypeChange() {
      if (this.updateParamForm.ParameterType === 1) {
        this.updateParamForm.ParamName = 'CurrentWindowRecordID';
        this.updateParamForm.ValueType = 'NumberExpression';
      } else {
        this.updateParamForm.ParamName = '';
        this.updateParamForm.ValueType = 'StringExpression';
      }
    },
    handleInput() {

    },
    handleParamClick(index) {
      this.currentIndex = index;
      if (this.currentIndex > -1) {
        const item = this.manager.Parameters[this.currentIndex];
        this.updateParamForm.ParamName = item.ParamName;
        this.updateParamForm.ParameterType = item.ParameterType;
        this.updateParamForm.ValueType = item.ValueType;
        this.updateParamForm.ID = item.ID;
      } else {
        this.updateParamForm.ParamName = '';
      }
    },
    async handleSave() {
      if (this.updateParamForm.ParamName === '') {
        this.$message({
          type: 'error',
          message: '参数名称不可为空',
        });
        return;
      }
      const res = await this.$http({
        url: 'api/ZSReport/AddOrUpdateReporDataSource_Param2',
        data: {
          reportID: this.manager.reportId,
          id: this.updateParamForm.ID,
          type: this.updateParamForm.ParameterType,
          paramName: this.updateParamForm.ParamName,
          dataType: this.updateParamForm.ValueType,
        },
      });
      if (res) {
        if (res.id) {
          this.updateParamForm.ID = res.id;
          this.manager.Parameters.push({
            ID: this.updateParamForm.ID,
            ParameterType: this.updateParamForm.ParameterType,
            ParamName: this.updateParamForm.ParamName,
            ValueType: this.updateParamForm.ValueType,
          });
          this.currentIndex = this.manager.Parameters.length - 1;
        } else {
          this.manager.Parameters.splice(this.currentIndex, 1, {
            ID: this.updateParamForm.ID,
            ParameterType: this.updateParamForm.ParameterType,
            ParamName: this.updateParamForm.ParamName,
            ValueType: this.updateParamForm.ValueType,
          });
        }
        this.$message({
          type: 'success',
          message: '保存成功',
        });
      }
    },

  },
};
</script>

<style>

</style>
